<template>
  <div class="home">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">项目</el-breadcrumb-item>
      <el-breadcrumb-item>项目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div slot="header" class="header">
        <span style="font-size: 16px; font-weight: bold">项目列表</span>
        <div style="float: right; margin-top: -8px">
          <el-button type="text" @click="dialogVisable = !dialogVisable"
            >新建项目</el-button
          >
          <!-- <i class="el-icon-s-grid"></i>
          <i class="el-icon-s-unfold"></i> -->
        </div>
      </div>
      <div>
        <el-tabs type="border-card">
          <el-tab-pane label="全部项目">
            <!-- <el-row>
              <el-form label-width="80px">
                <el-col :span="6">
                  <el-form-item label="项目名称">
                    <el-input placeholder=""></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="项目经理">
                    <el-input placeholder=""></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="项目组">
                    <el-input placeholder=""></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row> -->
            <el-divider></el-divider>
            <el-row>
              <el-table :data="data">
                <el-table-column
                  label="项目名称"
                  prop="name"
                  min-width="100"
                ></el-table-column>
                <el-table-column label="进度" min-width="120">
                  <template slot-scope="scope">
                    <el-progress
                      :stroke-width="12"
                      :percentage="scope.row.process"
                    ></el-progress>
                  </template>
                </el-table-column>
                <el-table-column
                  label="项目经理"
                  prop="manager"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="项目周期"
                  prop="days"
                  align="center"
                ></el-table-column>
                <el-table-column label="总工作量" align="center">
                  <template>120</template>
                </el-table-column>
                <el-table-column label="总任务数" align="center">
                  <template>60</template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="未开始"></el-tab-pane>
          <el-tab-pane label="进行中"></el-tab-pane>
          <el-tab-pane label="已完成"></el-tab-pane>
          <el-tab-pane label="已归档"></el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-dialog title="新建项目" :visible.sync="dialogVisable">
      <el-form>
        <el-form-item label="项目名称">
          <el-input placeholder=""></el-input>
        </el-form-item>
        <el-tabs>
          <el-tab-pane label="选择模版">
            <el-card>
              <div>
                <div style="font-weight: bold">等级保护测评项目管理</div>
                <p style="font-size: 12px">
                  通过内置等级保护测评流程和文件上传组件
                </p>
              </div>
            </el-card>
            <el-card>
              <div>
                <div style="font-weight: bold">风险评估测评项目管理</div>
                <p style="font-size: 12px">
                  通过内置等级保护测评流程和文件上传组件
                </p>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="新建模版"></el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button size="small" type="">取消</el-button>
          <el-button size="small" type="primary">下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      dialogVisable: false,
      data: [
        {
          name: "XXXX项目名称",
          group: "政企组",
          manager: "吴春乐",
          days: 120,
          process: 70,
        },
        {
          name: "XXXX项目名称",
          group: "政企组",
          manager: "吴春乐",
          days: 120,
          process: 60,
        },
        {
          name: "XXXX项目名称",
          group: "政企组",
          manager: "吴春乐",
          days: 120,
          process: 100,
        },
        {
          name: "XXXX项目名称",
          group: "政企组",
          manager: "吴春乐",
          days: 120,
          process: 20,
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.box {
  .box-title {
    padding: 8px 0px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .box-group {
    font-size: 14px;
  }
  .box-progress {
    padding: 10px 0px;
  }
  .box-status {
    padding: 10px 0px;
  }
  .box-manage {
    padding: 10px 0px;
  }
  .box-number {
    padding: 8px 0px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .label {
    width: 72px;
    display: inline-table;
    text-align: justify;
    text-align-last: justify;
    // padding-right: 8px;
    font-weight: bold;
  }
  .label::after {
    content: ":";
    font-weight: bold;
    padding-right: 8px;
  }
}
.header {
  i {
    font-size: 24px;
    padding: 4px;
  }
}
</style>
